React路由传值

2023-08-19 11:47| 来源: 网络整理| 查看: 265

1. 通过state进行传参 2. 通过params进行传参 3. 通过query进行传参

统一引用

import React from 'react'; import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; 通过state进行传参示例 let obj = { pathname:'/main', state:{id:12,name:'dahuang1'} }; class Index extends React.Component { render () { return ( header main box foot ) } }; function User ( props ) { console.log( props ); return ( 通过state获取参数获取name:{ props.location.state.name } 获取name:{ props.location.state.id } ) }; 解析

上面定义路由和传参的时候，用的是obj，根据react的方式 {{}} 第一个花括号是js，第二个花括号代表对象，我就把它单独拎出来了。（看自己需求）

开始传参 main

接收参数

function User ( props ) { console.log( props ); return ( 通过state获取参数获取name:{ props.location.state.name } 获取name:{ props.location.state.id } ) };

在props中打印 location.state接收传参内容，不在路由里显示，隐式传参，刷新页面数据不会丢失

通过params进行传参

代码大致和上面类似，就不全部粘贴出来了。

开始传参

//先定义传参数值 constructor ( props ) { super( props ); this.state = { name:'1', id:10, footName:'1', footId:20 } } let params = { pathname:`/header/${this.state.name}/${this.state.id}` } //方式一： header //方式二： foot

接收参数

function User ( props ) { console.log( props ); return ( 通过state获取参数获取name:{ props.match.params.name } 获取name:{ props.match.params.id } ) };

在props中打印match.params内容，会在路由路径上面显示，刷新页面数据不会丢失

通过query进行传参解析

开始传参

//先定义传参数值 let query = { pathname:'/head', query:{id:22,name:'张三'} } //方式一：头部 //方式二：中间部分

接收参数

function params ( props ) { console.log(props); return ( 接收参数信息这是参数name:{ props.location.query.name } 这是参数id:{ props.location.query.id } ) };

在props中打印 location.query接收传参内容，不在路由里显示，隐式传参,刷新页面参数会丢失

** 路由传值，在React里面调用和Vue传值，Jquery传值，原始url传值类似，只是每一个框架都多了一个自己的声明包裹。**

【本文地址】

公司简介

联系我们